<template>
    <div id="container">
        <div id="header">
        </div>
        <div id="container">
            <div id="content2">
                <table width="100%" height="41" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="15" height="18" align="left" valign="top">
                            <div align="left"></div>
                        </td>
                        <td width="385" align="left" valign="bottom" class="12">&nbsp;</td>
                    </tr>
                    <tr>
                        <td height="4" colspan="2" align="left" valign="bottom"></td>
                    </tr>
                    <tr>
                        <td height="15" align="left" valign="top">&nbsp;</td>
                        <td height="15" align="left" valign="top" class="12">
                            <table width="100%" height="20" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td height="20">

                                        <el-table :data="units" :row-class-name="tableRowClassName">
                                            <el-table-column label="编号id" prop="unitid"></el-table-column>
                                            <el-table-column label="单位名称" prop="unitname"></el-table-column>
                                            <el-table-column label="单位地址" prop="address"></el-table-column>
                                            <el-table-column label="法人" prop="corporation"></el-table-column>
                                            <el-table-column label="注册资金" prop="investment"></el-table-column>
                                            <el-table-column label="性质" prop="type"></el-table-column>
                                            <el-table-column label="电话" prop="tel"></el-table-column>
                                            <el-table-column label="简介" prop="introduction"></el-table-column>
                                            <el-table-column label="操作">
                                                <template slot-scope="scope">
                                                    <el-row>
                                                        <el-button type="danger"
                                                            @click="deleteByIds(scope.row)">删除</el-button>
                                                        <el-button type="danger"
                                                            @click="updateByIds(scope.row)">修改</el-button>
                                                    </el-row>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                        <el-pagination :total="total" :page-size="usersPage.pageSize"
                                            :current-page="usersPage.currentPage"
                                            layout="prev,pager,next,jumper,sizes,->,total" :page-sizes="[2, 3, 4, 5]"
                                            @current-change="currentChange" @size-change="sizeChange"></el-pagination>

                                        <!-- 更新-->
                                        <!--更新数据对话框表单-->
                                        <el-dialog title="更新" :visible.sync="updateVisible" width="30%">
                                            <el-form ref="form" :model="updateEx" label-width="80px">
                                                <el-form-item label="编号id">
                                                    <el-input v-model="updateEx.unitid"></el-input>
                                                </el-form-item>

                                                <el-form-item label="单位名称">
                                                    <el-input v-model="updateEx.unitname"></el-input>
                                                </el-form-item>

                                                <el-form-item label="单位地址">
                                                    <el-input v-model="updateEx.address"></el-input>
                                                </el-form-item>

                                                <el-form-item label="法人">
                                                    <el-input v-model="updateEx.corporation"></el-input>
                                                </el-form-item>

                                                <el-form-item label="注册资金">
                                                    <el-input v-model="updateEx.investment"></el-input>
                                                </el-form-item>

                                                <el-form-item label="性质">
                                                    <el-input v-model="updateEx.type"></el-input>
                                                </el-form-item>

                                                <el-form-item label="电话">
                                                    <el-input v-model="updateEx.tel"></el-input>
                                                </el-form-item>

                                                <el-form-item label="简介">
                                                    <el-input type="textarea"
                                                        v-model="updateEx.introduction"></el-input>
                                                </el-form-item>

                                                <el-form-item>
                                                    <el-button type="primary" @click="updateUnit()">提交</el-button>
                                                    <el-button @click="updateVisible = false">取消</el-button>
                                                </el-form-item>
                                            </el-form>

                                        </el-dialog>





                                    </td>
                                </tr>
                            </table>
                            <br />
                            <div class="table_wz"></div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import axios from '../../utils/Myaxios'

const options = {
    data() {
        return {
            total: 0,
            units: [],
            usersPage: {
                currentPage: 1,
                pageSize: 3
            },
            updateVisible: false,
            updateEx: {
                unitid: '',
                unitname: '',
                address: '',
                corporation: '',
                investment: '',
                type: '',
                tel: '',
                introduction: ''
            }

        }
    },
    mounted() {
        this.get()
    },
    methods: {
        async get() {
            const _axios = axios.create({
                baseURL: 'http://localhost:8080',
                withCredentials: true
            })
            const resp = await _axios.get('/units/all', {
                params: this.usersPage
            });
            this.units = resp.data.data.records
            this.total = resp.data.data.total
            // console.log(resp)
        },
        sizeChange(size) {
            this.usersPage.pageSize = size
            this.get()
        },
        currentChange(page) {
            this.usersPage.currentPage = page
            this.get()
        },
        // eslint-disable-next-line no-unused-vars
        deleteByIds(row) {

        },
        // 每行颜色
        // eslint-disable-next-line no-unused-vars
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 0) {
                return 'warning-row'
            } else if (rowIndex === 2) {
                return 'success-row'
            }
            return ''
        },
        //   数据回显
        updateByIds(row) {
            this.updateEX = {
                unitid: row.unitid,
                unitname: row.unitname,
                address: row.address,
                corporation: row.corporation,
                investment: row.investment,
                type: row.type,
                tel: row.tel,
                introduction: row.introduction
            },
                this.updateVisible = true
        },
        //   数据更新
        async updateUnit() {
            const _axios = axios.create({
                baseURL: 'http://localhost:8080',
                withCredentials: true
            })
            await _axios.post('/users/updateEx',{},{
                params:{
                    updateEx:this.updateEx
                }
            })

        }



    }
}
export default options
</script>

<style>
@import '../../assets/static/andreasblue.css';

.el-table .warning-row {
    background: cornflowerblue
}

.el-table .success-row {
    background: gray
}
</style>